<!-- 系统参数 -->
<template>
    <div class="addAirPlan">
        <custom-dialog title="系统参数" size="large" @dialogClose="dialogClose">
            <div class="topStep">
                <div class="warp">
                    <img src="@/assets/images/1021/温度控制.svg" />
                    <label class="title">温度选择</label>
                    <span :class="wdValue == item ? 'hover' : ''" v-for="item in wdList" :key="item" @click="wdValue = item">{{
                        item
                    }}</span>
                </div>
                <div class="warp">
                    <img src="@/assets/images/1021/wendu.png" />
                    <label class="title">空调电流阈值（mA）</label>
                    <div style="font-size: 30px; color: #409eff">
                        <el-input type="number" style="width: 100px" v-model="ktdlyz" min="0" @change="ktdlyzWdzChange"></el-input>
                        <span :class="ktdlyzWdz == 1 ? 'hover' : ''" @click="ktdlyzWdzClick">无动作</span>
                    </div>
                </div>
                <div class="warp">
                    <img src="@/assets/images/1021/品牌代码.svg" />
                    <label class="title">空调品牌代码</label>
                    <el-input type="number" style="width: 100px" v-model="ktppdm" min="0" @change="ktppdmChange"></el-input>
                    <span :class="ktppdmWdz == 1 ? 'hover' : ''" @click="ktppdmWdzClick">无动作</span>
                </div>
                <div class="warp">
                    <img src="@/assets/images/1021/功率阀值.svg" />
                    <label class="title">插座检测功率阈值（W）</label>
                    <el-input type="number" style="width: 100px" v-model="czjcglyz" min="0" @change="czjcglyzChange"></el-input>
                    <span :class="czjcglyzWdz == 1 ? 'hover' : ''" @click="czjcglyzWdzClick">无动作</span>
                </div>

                <div class="warp">
                    <div class="warpDiv">
                        <img src="@/assets/images/1021/心跳周期.svg" />
                    </div>

                    <label class="title">心跳周期（min）</label>
                    <el-input type="number" style="width: 100px" v-model="xtzq" min="30" max="1440" @change="xtzqChange"></el-input>
                    <span :class="xtzqWdz == 1 ? 'hover' : ''" @click="xtzqWdzClick">无动作</span>
                </div>
            </div>
            <div style="text-align: right; margin-top: 10px">
                <el-button type="primary" class="nextBtn" :loading="loading" @click="dqClick" v-if="nodeList.length == 1">读取</el-button>
                <el-button type="primary" class="nextBtn" @click="saveData">确定</el-button>
            </div>
        </custom-dialog>
    </div>
</template>

<script>
import customDialog from '@/components/customComponents/customDialog'
import {PopupCommon} from '@/libs/popupCommon'
import iconBorder from '@/components/newIndex/iconBorder'
import {AjaxCommon} from '@/libs/apiCommon'
export default {
    name: 'addAirPlan',
    components: {customDialog, iconBorder},
    props: ['treeList'],
    watch: {
        treeList: {
            handler(newV) {
                if (newV) {
                    this.nodeList = newV
                }
            },
            immediate: true
        }
    },
    data() {
        return {
            loading: false,
            nodeList: [],
            xtzq: '',
            xtzqWdz: 1,
            czjcglyz: '',
            czjcglyzWdz: 1,
            ktppdm: '',
            ktppdmWdz: 1,
            ktdlyz: '',
            ktdlyzWdz: 1,
            // 温度选择
            wdValue: '无动作',
            wdList: ['内部温度', '外部温度', '无动作'],
            wdValueList: [1, 2, 255]
        }
    },
    computed: {},
    created() {},
    methods: {
        async dqClick() {
            this.loading = true
            const item = this.nodeList[0]
            const data = await AjaxCommon(`/api/Eq/GetEqRtBadVal?eqid=${item.eq_guid}&sjx=14`, 'post', {})
            const v = data.data.Message
            this.loading = false
            const dSplit = v?.split('|')
            if (v && dSplit.length > 1) {
                this.ktppdm = dSplit?.[0] ?? ''
                if (this.ktppdm) {
                    this.ktppdmWdz = 0
                }
                this.ktdlyz = dSplit?.[1] ?? ''
                if (this.ktdlyz) {
                    this.ktdlyzWdz = 0
                }
                this.czjcglyz = dSplit?.[2] ?? ''
                if (this.czjcglyz) {
                    this.czjcglyzWdz = 0
                }
                const wdxz = dSplit?.[3] ?? ''
                if (wdxz == 1) {
                    this.wdValue = '内部温度'
                } else if (wdxz == 2) {
                    this.wdValue = '外部温度'
                } else {
                    this.wdValue = '无动作'
                }
                this.xtzq = dSplit?.[4] ?? ''
                if (this.xtzq) {
                    this.xtzqWdz = 0
                }
            } else {
                PopupCommon.notify('info', '未读取到数据')
            }
        },
        saveData() {
            //             11、设置系统参数
            // Sjx=15  cs参数设定对应 （5个参数，通过‘|’分隔）
            // 空调品牌代码|空调电流阈值|插座检测功率 | 温度选择 |心跳周期
            // 空调品牌代码  对应空调编号;不设置传65535
            // 空调电流阈值 对应单位mA ;不设置传65535
            // 插座检测功率    对应单位mW 用于检测空调的插头是否被拔掉 ;不设置传65535
            // 温度选择 1.内部温度2，外部温度  默认为1;不设置传255
            // 心跳周期 单位min，取值范围：30-1440 ;不设置传65535

            // 温度选择
            const msIndex = this.wdList.findIndex((t) => t == this.wdValue)
            const wdxzValue = this.wdValueList[msIndex]
            //空调电流阈值（mA）
            let ktdlyz = 65535
            if (this.ktdlyzWdz == 0) {
                ktdlyz = this.ktdlyz
            }
            // 空调品牌代码
            let ktppdm = 65535
            if (this.ktppdmWdz == 0) {
                ktppdm = this.ktppdm
            }
            // 插座检测功率阈值
            let czjcglyz = 65535
            if (this.czjcglyzWdz == 0) {
                czjcglyz = this.czjcglyz
            }
            // 心跳周期
            let xtzq = 65535
            if (this.xtzqWdz == 0) {
                xtzq = this.xtzq
            }
            const finishValue = ktppdm + '|' + ktdlyz + '|' + czjcglyz + '|' + wdxzValue + '|' + xtzq
            this.$emit('save', finishValue)
        },
        ktppdmWdzClick() {
            if (this.ktppdmWdz == 0) {
                this.ktppdmWdz = 1
            } else {
                this.ktppdmWdz = 0
            }
        },
        ktdlyzWdzChange(e) {
            this.ktdlyz = e
            this.ktdlyzWdz = 0
        },
        ktdlyzWdzClick() {
            if (this.ktdlyzWdz == 0) {
                this.ktdlyzWdz = 1
            } else {
                this.ktdlyzWdz = 0
            }
        },
        ktppdmChange(e) {
            this.ktppdm = e
            this.ktppdmWdz = 0
        },
        czjcglyzChange(e) {
            this.czjcglyz = e
            this.czjcglyzWdz = 0
        },
        czjcglyzWdzClick() {
            if (this.czjcglyzWdz == 0) {
                this.czjcglyzWdz = 1
            } else {
                this.czjcglyzWdz = 0
            }
        },
        xtzqWdzClick() {
            if (this.xtzqWdz == 0) {
                this.xtzqWdz = 1
            } else {
                this.xtzqWdz = 0
            }
        },
        xtzqChange(e) {
            // 30-1440
            if (e <= 30) {
                this.xtzq = 30
            } else if (e >= 1440) {
                this.xtzq = 1440
            } else {
                this.xtzq = e
            }
            this.xtzqWdz = 0
        },
        dialogClose() {
            this.$emit('dialogClose', '')
        }
    }
}
</script>

<style lang="scss" scoped>
.ivu-tabs-bar {
    margin-bottom: 0 !important;
}
.topStep {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    .warp {
        .warpDiv {
            background-color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            justify-content: center;
            align-items: center;
            display: flex;
            img {
                width: 32px;
            }
        }
        width: calc(50% - 10px);
        display: flex;
        background-color: #f0f3fa;
        border-radius: 8px;
        padding: 10px;
        align-items: center;
        justify-content: flex-start;
        &:nth-child(2n) {
            width: calc(50% - 10px);
        }
        .title {
            color: #2f4bbd;
            margin-left: 10px;
            margin-right: 30px;
            font-size: 18px;
        }
        span {
            display: flex;
            color: #2f4bbd;
            font-size: 16px;
            margin-left: 10px;
            cursor: pointer;
            border: 1px solid #f0f3fa;
            padding: 6px;
            display: inline-block;
            &:hover {
                background-color: #dce3f4;
                border-color: #2f4bbd;
                border-radius: 4px;
            }
        }
        .hover {
            background-color: #dce3f4;
            border-color: #2f4bbd;
            border-radius: 4px;
        }
    }
}
.wdControl {
    display: inline-block;
    border: 1px solid #ddd;
    padding: 4px 10px;
    font-size: 22px;
    color: #5795d4;
    cursor: pointer;
    line-height: 28px;
    height: 35px;
}
.wdControl:nth-child(1) {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    width: 40px;
    background-color: #dbe7f5;
}
.wdControl:nth-child(3) {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    width: 40px;
    background-color: #dbe7f5;
}
.wdControl:nth-child(2) {
    border-right: none;
    border-left: none;
}
</style>